1
<template>
  <div class="newClient">
    <div class="nc-top">
      <p>{{ showType }}资料</p>
      <i class="el-icon-close" @click="closeNewClient"></i>
    </div>
    <div style="display: flex">
      <div class="left">
        <div class="nc-info">
          <div class="nc-info-1">
            <p><span>*</span> 编号</p>
            <input
              type="text"
              style="width: 160px"
              v-model="no"
              :disabled="Dis"
              @blur="queryNo"
            />
            <p><span>*</span> 简称</p>
            <el-input v-model="name" @blur="queryNo"></el-input>
            <p>客户</p>
            <el-input v-model="nameAll"></el-input>
            <p>联系人</p>
            <el-input v-model="contact"></el-input>
          </div>
          <div class="nc-info-2">
            <p>负责人</p>
            <el-input v-model="principal"></el-input>
            <p>手机</p>
            <!--    @blur="checkPhoneNumber(cellphone)" -->
            <el-input v-model="cellphone"></el-input>
            <p>电话</p>
            <el-input v-model="phone"></el-input>
            <p>传真</p>
            <el-input v-model="fax"></el-input>
          </div>
          <div class="nc-info-3">
            <p>邮编</p>
            <el-input v-model="postcode"></el-input>
            <p>所属地区</p>
            <el-select v-model="area">
              <el-option
                v-for="item in provincearr"
                :key="item.value"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
            <p>业务</p>
            <el-select v-model="business">
              <el-option
                v-for="item in businessarr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p><span>*</span> 类型</p>
            <el-select v-model="type" style="width: 160px">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="nc-info-4">
            <p>订配货</p>
            <el-select v-model="orderFormAllocateCargo">
              <el-option
                v-for="item in ofacList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <p>总店编号</p>
            <el-input v-model="headquartersNo"></el-input>
            <!-- <p>售价</p>
            <el-input v-model="price"></el-input> -->
            <p>金额下限</p>
            <el-input v-model="outMoneyFloor"></el-input>
            <p>保证金</p>
            <el-input v-model="cashDeposit"></el-input>
          </div>

          <div class="nc-info-5" style="display: flex">
            <p>进货折数</p>
            <el-input v-model="inputDiscount"></el-input>
            <p>销货折数</p>
            <el-input v-model="sellDiscount"></el-input>

            <div style="display: flex">
              <p>退货率</p>
              <el-input v-model="refundRate">
                <template slot="append">%</template>
              </el-input>
            </div>
            <p class="nc-txt">备注</p>
            <el-input style="width: 160px" v-model="remark"></el-input>
          </div>

          <div class="nc-info" style="display: flex">
            <p class="nc-txt">地址</p>
            <el-input
              style="width: 415px"
              v-model="address"
              @keyup.enter.native="preservation"
            ></el-input>
            <p>授权手机号</p>
            <el-input
              style="width: 160px"
              @blur="multiplePhone(authorizationPhone)"
              v-model="authorizationPhone"
            ></el-input>
            <p>营业人员</p>
            <el-input style="width: 160px" v-model="personnelCount"></el-input>
          </div>
          <div class="nc-info" style="display: flex; margin-top: 5px">
            <p>店铺面积</p>
            <el-input style="width: 160px" v-model="acreage"></el-input>
            <div class="stop">
              <el-checkbox v-model="stop">停用</el-checkbox>
            </div>
          </div>
        </div>

        <div class="nc-table">
          <el-table
            class="clientlist"
            :data="clientlist"
            style="width: 100%"
            height="300px"
            highlight-current-row
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '40px' }"
          >
            <el-table-column prop="no" label="编号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="简称" width="180">
            </el-table-column>
            <el-table-column prop="headquartersNo" label="总店编号">
            </el-table-column>
          </el-table>
        </div>

        <div class="operation">
          <el-button @click="closeNewClient">取消</el-button>
          <el-button :disabled="Dis1" @click="edit" type="preservation(true)"
            >保存</el-button
          >
          <el-button
            :disabled="Dis1"
            @click="preservation(false)"
            type="primary"
            >保存并新建</el-button
          >
          <!-- <el-button @click="AddBrand">AddBrand</el-button> -->
        </div>
      </div>
      <div class="right-wrap">
        <div class="checkbox-wrap">
          <template v-if="!isDiscount">
            <template v-for="item in noTimeBrandDataList">
              <el-checkbox
                v-model="item.checked"
                :key="item.label"
                @change="changUpdateNoTimeBrandState(item)"
              >
                {{ item.label }}
              </el-checkbox>
            </template>
          </template>
          <template v-else>
            <template v-for="item in timeBrandDataList">
              <el-checkbox
                v-model="item.checked"
                :key="item.label"
                @change="changUpdateTimeBrandState(item)"
              >
                {{ item.label }}
              </el-checkbox>
            </template>
          </template>
        </div>
        <div class="name-wrap">
          <el-button size="small" @click="handleCutClick">
            品牌折扣
            <span v-if="isDiscount">(时间)</span>
          </el-button>
          <!-- 新建全选 -->
          <el-button
            size="small"
            v-if="!Dis"
            @click="handleSelectAllClick(true)"
          >
            全选
          </el-button>
          <el-button
            size="small"
            v-if="!Dis"
            @click="handleSelectAllClick(false)"
          >
            反选
          </el-button>
          <!-- 编辑的全选 -->
          <el-button
            size="small"
            v-if="Dis"
            @click="handleEditorSelectAllClick(true)"
            >全选</el-button
          >
          <el-button
            size="small"
            v-if="Dis"
            @click="handleEditorSelectAllClick(false)"
            >反选</el-button
          >
          <div class="search-wrap">
            <el-input
              class="_input"
              placeholder="请输入品牌"
              v-model="searchBrand"
            ></el-input>
            <el-button type="primary" size="small" @click="handleSearchClick"
              >查询</el-button
            >
            <el-button size="small" @click="handleRemoveSearchClick"
              >清空</el-button
            >
          </div>
        </div>
        <div class="table-wrap">
          <!-- 没有时间的品牌折扣 -->
          <el-table
            v-if="!isDiscount"
            ref="noTimeTableRef"
            border
            :data="filterNoTimeTableData"
            @row-click="rowClick"
            height="350"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '36px' }"
          >
            <el-table-column
              prop="customerNo"
              label="编号"
              align="center"
              width="60"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              prop="brandedName"
              label="品牌"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="sellDiscount"
              label="销售折数"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  class="table-input"
                  v-model="scope.row.sellDiscount"
                  @blur="handleBlurNumber(scope)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="handle"
              label="操作"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleDeleteRowNoTimeClick(scope)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 有时间的品牌折扣 -->
          <el-table
            v-else
            border
            ref="timeTableRef"
            :data="filterTimeTableData"
            @row-click="rowClick"
            height="350"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '36px' }"
          >
            <el-table-column
              prop="customerNo"
              label="编号"
              align="center"
              width="60"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="brandedName"
              label="品牌"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="sellDiscount"
              label="销售折数"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                <el-input
                  class="table-input"
                  v-model="scope.row.sellDiscount"
                  @blur="handleBlurNumber(scope)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="startTime"
              label="开始时间"
              width="170"
              align="center"
            >
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.startTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              prop="endTime"
              label="结束时间"
              width="170"
              align="center"
            >
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.endTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </template>
            </el-table-column>

            <el-table-column prop="isOk" label="有效" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isOk"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="handle"
              label="操作"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleDeleteRowTimeClick(scope)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
function deteleObject(obj) {
  var uniques = []
  var stringify = {}
  for (var i = 0; i < obj.length; i++) {
    var keys = Object.keys(obj[i])
    keys.sort(function (a, b) {
      return Number(a) - Number(b)
    })
    var str = ''
    for (var j = 0; j < keys.length; j++) {
      str += JSON.stringify(keys[j])
      str += JSON.stringify(obj[i][keys[j]])
    }
    if (!stringify.hasOwnProperty(str)) {
      uniques.push(obj[i])
      stringify[str] = true
    }
  }
  uniques = uniques
  return uniques
}
import {
  getClient,
  postClient,
  putClient,
  fundBrand,
  getBrandList,
  getBrand,
  addDiscount,
  putDiscount
} from '../../../../network/client'
import { provincea } from '../../../../config/address'
import { getClerk } from '../../../../network/clerk'
import enterUp from '../../../../components/mixins/enterUp'
import checkPhone from '../../../../components/mixins/checkPhone'
import checkMultiplePhone from '../../../../components/mixins/checkMultiplePhone'
import { get, save } from '../../../../network/customerOrderTotal'
import {
  toTimeGetBrandedList,
  noToTimeGetBrandedList,
  saveTimeBranded,
  saveNoTimeBranded,
  deleteNoTimeBranded,
  deleteTimeBranded
} from '@/request/client/branded'
import { arrUnique, randomCharacters } from '@/util/util'
import { isIntegerOrDecimal } from '@/util/regular'
export default {
  mixins: [enterUp, checkMultiplePhone],
  props: {
    details: {
      type: Object,
      isChange: false
    },
    showType: {
      type: String,
      default: ''
    },
    SendData: {
      type: Array,
      default: []
    },
    sendList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      Dis1: false,
      editionData: [], //版本信息
      saveData: [],
      getData: [],
      queryData: [
        // {customerNo:'11',brandedName:'aaaa',sellDiscount:'10'},
        // {customerNo:'12',brandedName:'dsfd',sellDiscount:'10'},
        // {customerNo:'13',brandedName:'型尺色',sellDiscount:'10'},
      ],
      checkL: [],
      checkL1: [],
      Dis: false,
      dList: [],
      tList: [],
      tList1: [],
      checkList: [],
      businessarr: [],
      provincearr: [],
      id: '',
      selected: {},
      no: '',
      stop: false,
      originalNo: '',
      principal: '',
      postcode: '',
      orderFormAllocateCargo: '配',
      ofacList: [
        {
          label: '配',
          value: '配'
        },
        {
          label: '订',
          value: '订'
        }
      ],
      inputDiscount: '10',
      name: '',
      cellphone: '',
      area: '',
      headquartersNo: '',
      sellDiscount: '10',
      nameAll: '',
      phone: '',
      business: '',
      price: '',
      cashDeposit: '',
      contact: '',
      fax: '',
      type: '订货',
      typeList: [],
      outMoneyFloor: '',
      refundRate: '',
      address: '',
      authorizationPhone: '',
      remark: '',
      personnelCount: 6, // 营业员
      acreage: 100, // 面积
      clientlist: [],
      clientlist1: [],
      Da1: [],
      Da2: [],
      cData: [],
      element: {},
      tList3: [],
      checkx: '',
      date: [],
      value: true,
      isDiscount: false, // 品牌折扣
      searchBrand: '', // 品牌搜索
      brandedListAll: [],
      brandDataList: [], // 品牌
      selectedBrandData: [], // 选中的品牌数据
      tList: [], // 选中品牌的数据
      getNoBrandData: [], // 根据编号获取的品牌数据
      noTimeTableData: [], // 没有时间的品牌折旧数据(原数据)
      timeTableData: [], // 有时间的品牌折旧数据(原数据)
      filterTimeTableData: [], // 有时间的品牌折旧数据(跟品牌数据过滤之后的数据)
      filterNoTimeTableData: [], // 没有时间的品牌折旧数据(跟品牌数据过滤之后的数据)
      timeBrandDataList: [], // 有时间的品牌数据
      noTimeBrandDataList: [] // 没有时间的品牌数据
    }
  },
  methods: {
    /**
     * 新增 11.14
     */

    // 获取有时间的品牌折扣
    async toTimeGetBrandedList(params) {
      const { data } = await toTimeGetBrandedList(params)
      if (data && data.code === 200) {
        // console.log(data.data, '有时间品牌')
        this.timeTableData = data.data || []
        // console.log(this.timeBrandDataList)
        // 编辑有时间
        if (this.Dis) {
          this.timeBrandDataList.forEach((item) => {
            this.timeTableData.forEach((current) => {
              if (current.brandedName === item.label) {
                item['checked'] = true
                this.filterTimeTableData.push(current)
              }
            })
          })
        }
      }
    },

    // 获取没有时间的品牌折扣
    async noToTimeGetBrandedList(params) {
      const { data } = await noToTimeGetBrandedList(params)
      // console.log(data.data, '没时间品牌')
      if (data && data.code === 200) {
        this.noTimeTableData = data.data || []

        // 编辑没有时间
        if (this.Dis) {
          this.noTimeBrandDataList.forEach((item) => {
            this.noTimeTableData.forEach((current) => {
              if (current.brandedName === item.label) {
                item['checked'] = true
                this.filterNoTimeTableData.push(current)
              }
            })
          })
        }
      }
    },

    // 获取所有品牌
    async fundBrand() {
      const { data } = await fundBrand()
      if (data && data.code === 200) {
        this.brandDataList = data.data.map((item) => {
          return {
            label: item,
            checked: false
          }
        })
      }
    },
    // 设置 checkbox 的选中状态
    setBrandDataChecked(isChecked) {
      if (this.brandDataList.length) {
        this.brandDataList = this.brandDataList.map((item) => {
          return {
            ...item,
            checked: isChecked
          }
        })
        const timeData = this.brandDataList.map((item) => {
          return {
            ...item,
            checked: false
          }
        })
        this.noTimeBrandDataList = JSON.parse(
          JSON.stringify(this.brandDataList)
        )
        //新建的时候 有时间的品牌折扣不需要全选
        this.timeBrandDataList = JSON.parse(JSON.stringify(timeData))
      }
    },
    // 设置table数据
    // isState状态：false/新建，true/编辑
    setTableData(isState) {
      this.filterNoTimeTableData = []
      //新建状态
      if (!isState) {
        this.noTimeBrandDataList.forEach((item) => {
          this.filterNoTimeTableData.push({
            customerNo: '',
            brandedName: item.label,
            sellDiscount: 10,
            handle: ''
          })
          // this.filterTimeTableData.push({
          //   customerNo: this.no,
          //   brandedName: item.label,
          //   sellDiscount: 10,
          //   startTime: '',
          //   endTime: '',
          //   isOk: 0,
          //   handle: ''
          // })
        })
      }
      // console.log(isState)
    },
    handleBlurNumber({ row }) {
      const value = Number(row.sellDiscount)
      if (!(value >= 0 && value <= 10)) {
        this.$message.error('请输入正确的销售折数')
        row.sellDiscount = 10
      }
    },

    // 保存品牌折扣，筛选有时间还是没有时间
    async handleSaveBranded() {
      if (!this.Dis) {
        if (this.filterTimeTableData.length) {
          this.filterTimeTableData.forEach((item) => {
            item['customerNo'] = this.no
          })
          this.saveTimeBranded(this.filterTimeTableData)
        }
        if (this.filterNoTimeTableData.length) {
          this.filterNoTimeTableData.forEach((item) => {
            item['customerNo'] = this.no
          })
          this.saveNoTimeBranded(this.filterNoTimeTableData)
        }
      } else {
        if (this.filterNoTimeTableData.length) {
          this.saveNoTimeBranded(this.filterNoTimeTableData)
        }
        if (this.filterTimeTableData.length) {
          this.saveTimeBranded(this.filterTimeTableData)
        }
      }
    },
    // 保存有时间的品牌折扣
    async saveTimeBranded(dataList) {
      const { data } = await saveTimeBranded(dataList)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
      }
    },
    // 保存没有时间的品牌折扣
    async saveNoTimeBranded(dataList) {
      const { data } = await saveNoTimeBranded(dataList)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
      }
    },

    // 有时间的品牌数据
    changUpdateTimeBrandState(item) {
      // 新建
      if (!this.Dis) {
        //  删除
        if (!item.checked) {
          this.filterTimeTableData.forEach((current, index) => {
            if (current.brandedName === item.label) {
              this.filterTimeTableData.splice(index, 1)
            }
          })
        } else {
          // 新建
          this.filterTimeTableData.splice(this.filterTimeTableData.length, 0, {
            customerNo: '',
            brandedName: item.label,
            sellDiscount: 10,
            startTime: '',
            endTime: '',
            isOk: 0,
            handle: ''
          })
        }
      } else {
        // 编辑
        //  删除
        if (!item.checked) {
          this.filterTimeTableData.forEach((current, index) => {
            if (current.brandedName === item.label) {
              this.filterTimeTableData.splice(index, 1)
            }
          })
        } else {
          // 新建
          this.filterTimeTableData.splice(this.filterTimeTableData.length, 0, {
            customerNo: this.no,
            brandedName: item.label,
            sellDiscount: 10,
            startTime: '',
            endTime: '',
            isOk: 0,
            handle: ''
          })
        }
      }
    },
    // 没有时间的品牌数据
    changUpdateNoTimeBrandState(item) {
      // 新建
      if (!this.Dis) {
        //  删除
        if (!item.checked) {
          this.filterNoTimeTableData.forEach((current, index) => {
            if (current.brandedName === item.label) {
              this.filterNoTimeTableData.splice(index, 1)
            }
          })
        } else {
          // 新建
          this.filterNoTimeTableData.splice(
            this.filterNoTimeTableData.length,
            0,
            {
              customerNo: '',
              brandedName: item.label,
              sellDiscount: 10,
              handle: ''
            }
          )
        }
      } else {
        // 编辑
        //  删除
        if (!item.checked) {
          this.filterNoTimeTableData.forEach((current, index) => {
            if (current.brandedName === item.label) {
              this.filterNoTimeTableData.splice(index, 1)
            }
          })
        } else {
          // 新建
          this.filterNoTimeTableData.splice(
            this.filterNoTimeTableData.length,
            0,
            {
              customerNo: this.no,
              brandedName: item.label,
              sellDiscount: 10,
              handle: ''
            }
          )
        }
      }
    },
    changeDate(date) {
      if (date) {
        this.discountQueryData.startTime = date[0]
        this.discountQueryData.endTime = date[0]
      } else {
        this.discountQueryData.startTime = ''
        this.discountQueryData.endTime = ''
      }
    },
    // 删除没有时间的
    async handleDeleteRowNoTimeClick({ row }) {
      // 判断新建还是编辑
      if (!this.Dis) {
        this.filterNoTimeTableData.forEach((current, index) => {
          if (current.brandedName === row.brandedName) {
            this.filterNoTimeTableData.splice(index, 1)
            // 更新品牌状态
            this.noTimeBrandDataList.forEach((item) => {
              if (item.label === row.brandedName) {
                item['checked'] = false
              }
            })
          }
        })
      } else {
        // 编辑,请求删除接口
        if (row.id) {
          const { data } = await deleteNoTimeBranded({ id: row.id })
          if (data && data.code === 200) {
            this.$message.success(data.msg)
            // 删除本地对应的数据
            this.filterNoTimeTableData.forEach((item, index) => {
              if (row.id === item.id) {
                this.filterNoTimeTableData.splice(index, 1)
              }
            })
            // 更新品牌状态
            this.noTimeBrandDataList.forEach((current) => {
              if (current.label === row.brandedName) {
                current['checked'] = false
              }
            })
          }
        } else {
          this.filterNoTimeTableData.forEach((current, index) => {
            if (current.brandedName === row.brandedName) {
              this.filterNoTimeTableData.splice(index, 1)
              // 更新品牌状态
              this.noTimeBrandDataList.forEach((item) => {
                if (item.label === row.brandedName) {
                  item['checked'] = false
                }
              })
            }
          })
        }
      }
    },
    // 删除有时间的数据
    async handleDeleteRowTimeClick({ row }) {
      console.log(row)
      if (!this.Dis) {
        this.filterTimeTableData.forEach((current, index) => {
          if (current.brandedName === row.brandedName) {
            this.filterTimeTableData.splice(index, 1)
            // 更新品牌状态
            this.timeBrandDataList.forEach((item) => {
              if (item.label === row.brandedName) {
                item['checked'] = false
              }
            })
          }
        })
      } else {
        // 编辑,请求删除接口
        if (row.id) {
          const { data } = await deleteTimeBranded({ id: row.id })
          if (data && data.code === 200) {
            this.$message.success(data.msg)
            // 删除本地对应的数据
            this.filterTimeTableData.forEach((item, index) => {
              if (row.id === item.id) {
                this.filterTimeTableData.splice(index, 1)
              }
            })
            // 更新品牌状态
            this.timeBrandDataList.forEach((current) => {
              if (current.label === row.brandedName) {
                current['checked'] = false
              }
            })
          }
        } else {
          this.filterTimeTableData.forEach((current, index) => {
            if (current.brandedName === row.brandedName) {
              this.filterTimeTableData.splice(index, 1)
              // 更新品牌状态
              this.timeBrandDataList.forEach((item) => {
                if (item.label === row.brandedName) {
                  item['checked'] = false
                }
              })
            }
          })
        }
      }
    },
    handleCutClick() {
      this.isDiscount = !this.isDiscount
    },
    // 新建全选
    handleSelectAllClick(isState) {
      if (!this.isDiscount) {
        this.noTimeBrandDataList.forEach((item) => {
          item['checked'] = isState
        })
        // 判断是全选还是反选
        if (isState) {
          this.filterNoTimeTableData = []
          this.noTimeBrandDataList.forEach((item) => {
            if (item.checked) {
              this.filterNoTimeTableData.push({
                customerNo: '',
                brandedName: item.label,
                sellDiscount: 10,
                handle: ''
              })
            }
          })
        } else {
          this.filterNoTimeTableData = []
        }
      } else {
        this.timeBrandDataList.forEach((item) => {
          item['checked'] = isState
        })
        if (isState) {
          this.filterTimeTableData = []
          this.timeBrandDataList.forEach((item) => {
            if (item.checked) {
              this.filterTimeTableData.push({
                customerNo: '',
                brandedName: item.label,
                sellDiscount: 10,
                startTime: '',
                endTime: '',
                isOk: 0,
                handle: ''
              })
            }
          })
        } else {
          this.filterTimeTableData = []
        }
      }
      // // console.log(this.isDiscount)
      // if (!this.isDiscount) {
      //   this.noTimeBrandDataList.forEach((item) => {
      //     item['checked'] = isState
      //   })
      // } else {
      //   this.filterTimeTableData = []
      //   this.timeBrandDataList.forEach((item) => {
      //     item['checked'] = isState
      //     this.filterTimeTableData.push({
      //       customerNo: this.no,
      //       brandedName: item.label,
      //       sellDiscount: 10,
      //       startTime: '',
      //       endTime: '',
      //       isOk: 0,
      //       handle: ''
      //     })
      //   })
      // }
    },
    // 编辑有时间和没时间的全选
    handleEditorSelectAllClick(isState) {
      if (!this.isDiscount) {
        this.noTimeBrandDataList.forEach((item) => {
          item['checked'] = isState
        })
        if (isState) {
          let brandedName = [] // 保存已经存在的品牌
          let brandData = [] // 品牌数据
          this.filterNoTimeTableData.forEach((item) => {
            brandedName.push(item.brandedName)
          })
          this.noTimeBrandDataList.forEach((current) => {
            // 根据已经保存的品牌数据来获取还没有选中的品牌数据
            if (!brandedName.includes(current.label)) {
              brandData.push({
                customerNo: this.no,
                brandedName: current.label,
                sellDiscount: 10,
                handle: ''
              })
            }
          })
          //
          this.filterNoTimeTableData.splice(
            this.filterNoTimeTableData.length,
            0,
            ...brandData
          )
        } else {
          this.filterNoTimeTableData = []
        }
      } else {
        this.timeBrandDataList.forEach((item) => {
          item['checked'] = isState
        })
        if (isState) {
          let brandedName = [] // 保存已经存在的品牌
          let brandData = [] // 品牌数据
          this.filterTimeTableData.forEach((item) => {
            brandedName.push(item.brandedName)
          })
          this.timeBrandDataList.forEach((current) => {
            // 根据已经保存的品牌数据来获取还没有选中的品牌数据
            if (!brandedName.includes(current.label)) {
              brandData.push({
                customerNo: this.no,
                brandedName: current.label,
                sellDiscount: 10,
                startTime: '',
                endTime: '',
                isOk: 0,
                handle: ''
              })
            }
          })
          //
          this.filterTimeTableData.splice(
            this.filterTimeTableData.length,
            0,
            ...brandData
          )
        } else {
          this.filterTimeTableData = []
        }
      }
    },
    // 查询
    handleSearchClick() {
      const reg = new RegExp(this.searchBrand)
      // 隐藏对应的行
      if (!this.isDiscount) {
        const noTimeTableEl =
          this.$refs['noTimeTableRef'].bodyWrapper.children[0].children[1]
            .children
        noTimeTableEl.forEach((item, index) => {
          if (!reg.test(item.textContent)) {
            noTimeTableEl[index]['style'] = 'display: none'
          }
        })
      } else {
        const timeTableEl =
          this.$refs['timeTableRef'].bodyWrapper.children[0].children[1]
            .children
        timeTableEl.forEach((item, index) => {
          if (!reg.test(item.textContent)) {
            timeTableEl[index]['style'] = 'display: none'
          }
        })
      }
    },
    // 清空
    handleRemoveSearchClick() {
      this.searchBrand = ''
      if (!this.isDiscount) {
        const noTimeTableEl =
          this.$refs['noTimeTableRef'].bodyWrapper.children[0].children[1]
            .children
        noTimeTableEl.forEach((item, index) => {
          noTimeTableEl[index]['style'] = ''
        })
      } else {
        const timeTableEl =
          this.$refs['timeTableRef'].bodyWrapper.children[0].children[1]
            .children
        timeTableEl.forEach((item, index) => {
          timeTableEl[index]['style'] = ''
        })
      }
    },
    // handleInvertSelectionClick() {
    //   this.timeBrandDataList.forEach((item) => {
    //     item['checked'] = false
    //   })
    //   this.filterTimeTableData = []
    // },
    // 查询
    // async handleSearchClick() {
    //   const params = {
    //     ...this.discountQueryData,
    //     customerNo: this.no
    //   }
    //   if (!this.isDiscount) {
    //     this.noToTimeGetBrandedList(params)
    //   } else {
    //     this.toTimeGetBrandedList(params)
    //   }
    // },
    // handleSelectAll() {},
    /**
     * ----------- 新增 -------------
     */
    // 获取数据列表
    // async getClient() {
    //   // const requestData = { limit: 99999, page:  }
    //   const { data } = await getClient()
    //   if (data && data.data && data.code === 200) this.clientlist = data.data
    // },
    // 品牌表点击一行
    // cellClickEvent(e){
    //   this.index = e.$rowIndex
    //   this.element = e.data[this.index]
    //   console.log(this.element)
    // },
    rowClick(e) {
      this.element = e
      // console.log(this.element)
    },

    AddBrand() {
      // getBrand({customerNo:this.no}).then(res=>{
      //   console.log(res.data)
      //   if(res.data.code == 200){
      //     this.getData = res.data.data
      //     this.getData.forEach(e =>{
      //       this.Da1.push(e.brandedName)
      //     })
      //     console.log(this.Da1,this.checkL)
      //     var tmp = this.checkL.concat(this.Da1);
      //     console.log(tmp)
      //     var oData = {};
      //     for (var i = 0; i < tmp.length; i ++){
      //         (tmp[i] in oData) ? oData[tmp[i]] ++ : oData[tmp[i]] = 1;
      //     }
      //     for (let x in oData) {
      //         if (oData[x] == 1){
      //             this.cData.push(x);
      //         }
      //     }//两个数组如果值相同就删除
      //     console.log(this.cData)
      //     this.cData.forEach(e=>{
      //       this.saveData.push({brandedName:e,customerNo:this.no,sellDiscount:10,status:this.stop? 1 : 0})
      //     })
      //     let brandedSellDiscount = this.saveData
      //     console.log(brandedSellDiscount)
      //     addDiscount(brandedSellDiscount).then(res=>{
      //       console.log(res.data)
      //     })
      //   }
      // })
      // let iList = this.tList3.map((item) => item.brandedName)
      // let oList = this.tList.filter((item) => {
      //   return !iList.includes(item.brandedName)
      // })
      // // console.log(oList) //去掉原本存在的 获取新添加的
      // if (oList != '') {
      //   addDiscount(oList).then((res) => {})
      // }
    },

    queryNo() {
      if (this.showType == '新建') {
        if (this.sendList == '') {
          this.headquartersNo = this.no
        }
        for (let y of this.sendList) {
          if (this.no == y.no) {
            // this.clientlist = [y]
            this.clientlist = []
            this.headquartersNo = y.headquartersNo
            return
          } else if (this.no != y.no) {
            this.headquartersNo = this.no
            this.clientlist = []
          }
        }
        if (this.tList != '') {
          for (let u of this.tList) {
            u.customerNo = this.no
          }
        }
      }
    },
    // 清空数据
    clearData() {
      // this.originalNo = ''//原编号
      this.outMoneyFloor = ''
      this.refundRate = ''
      // this.inputDiscount = ''
      this.headquartersNo = ''
      this.nameAll = ''
      this.price = ''
      this.cashDeposit = ''
      this.no = ''
      this.stop = false
      this.principal = ''
      this.postcode = ''
      // this.orderFormAllocateCargo = ''

      this.address = ''
      this.authorizationPhone = ''
      // this.area = ''
      // this.business = ''
      this.cellphone = ''
      this.contact = ''
      this.fax = ''
      this.id = ''
      this.name = ''
      // this.sellDiscount = ''
      this.phone = ''
      this.remark = ''
      // this.type = ''
    },
    _getClient(params = {}) {
      // getClient(params).then(res=>{
      //   console.log(res)
      // this.clientlist = res.data.data
      //   this.clientlist1 = res.data.data
      // })
    },
    closeNewClient() {
      this.element = []
      this.tList = []
      this.checkL = []
      this.Dis1 = false
      this.$emit('closeNewClient')

      this.filterTimeTableData = []
      this.isDiscount = false
      this.tList = []
      this.setBrandDataChecked(false)
    },

    preservation() {
      if (
        this.type == '直营' &&
        (this.authorizationPhone == '' || this.authorizationPhone == null)
      ) {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '授权手机号不能为空'
        })
        return
      }
      if (this.no == undefined || this.no == '') {
        this.$message({ message: '客户编号不能为空', type: 'warning' })
        return
      }
      if (this.name == undefined || this.name == '') {
        this.$message({ message: '客户简称不能为空', type: 'warning' })
        return
      }
      if (this.type == undefined || this.type == '') {
        this.$message({ message: '类型不能为空', type: 'warning' })
        return
      }

      // if (this.cellphone) {
      //   if (!this.checkPhoneNumber(this.cellphone)) return
      // }

      let obj1 = {
        originalNo: this.no,
        // originalNo:1100,
        outMoneyFloor: this.outMoneyFloor,
        refundRate: this.refundRate,

        inputDiscount: this.inputDiscount,
        headquartersNo: this.headquartersNo,
        nameAll: this.nameAll,
        price: this.price,
        cashDeposit: this.cashDeposit,
        no: this.no,
        stop: this.stop ? 1 : 0,
        principal: this.principal,
        postcode: this.postcode,
        orderFormAllocateCargo: this.orderFormAllocateCargo,

        address: this.address,
        authorizationPhone: this.authorizationPhone,
        area: this.area,
        business: this.business,
        cellphone: this.cellphone,
        contact: this.contact,
        fax: this.fax,
        id: this.id,
        name: this.name,
        sellDiscount: this.sellDiscount,
        phone: this.phone,
        remark: this.remark,
        type: this.type,
        id: this.id
      }
      // this.AddBrand()
      // console.log(obj1)
      if (this.showType == '新建') {
        postClient(obj1).then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            this.$emit('postClientSuccess')
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.clearData()
            // this.getClient()
            this.tList = []
            this.checkL = []
            this.element = []

            this.clientlist.push(res.data.data)
            // console.log(res.data.data)
          } else {
            this.$message.error({
              message: '添加失败'
            })
          }
        })
      }
      if (this.showType == '编辑') {
        this.$confirm('是否修改此客户编号的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            if (this.tList != '') {
              // putDiscount(JSON.stringify(this.tList)).then((res) => {
              //   console.log(res.data)
              //   if (res.data.code == 200) {
              //     this.$message({
              //       message: '修改成功',
              //       type: 'success'
              //     })
              //   }
              // })
            }

            putClient(obj1).then((res) => {
              console.log(res.data)
              if (res.data.code == 200) {
                this.$emit('postClientSuccess')
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              } else {
                this.$message.error({
                  message: '修改失败'
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            })
          })
      }

      // 保存品牌折扣
      this.handleSaveBranded()
    },
    //编辑
    edit() {
      if (
        this.type == '直营' &&
        (this.authorizationPhone == '' || this.authorizationPhone == null)
      ) {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '授权手机号不能为空'
        })
        return
      }
      // this.preservation()
      if (this.no == undefined || this.no == '') {
        this.$message({ message: '客户编号不能为空', type: 'warning' })
        return
      }
      if (this.name == undefined || this.name == '') {
        this.$message({ message: '客户简称不能为空', type: 'warning' })
        return
      }
      if (this.type == undefined || this.type == '') {
        this.$message({ message: '类型不能为空', type: 'warning' })
        return
      }

      let obj = {
        id: this.id,
        originalNo: this.no,
        outMoneyFloor: this.outMoneyFloor,
        refundRate: this.refundRate,

        inputDiscount: this.inputDiscount,
        headquartersNo: this.headquartersNo,
        nameAll: this.nameAll,
        price: this.price,
        cashDeposit: this.cashDeposit,
        no: this.no,
        stop: this.stop ? 1 : 0,
        principal: this.principal,
        postcode: this.postcode,
        orderFormAllocateCargo: this.orderFormAllocateCargo,

        address: this.address,
        authorizationPhone: this.authorizationPhone,
        area: this.area,
        business: this.business,
        cellphone: this.cellphone,
        contact: this.contact,
        fax: this.fax,
        id: this.id,
        name: this.name,
        sellDiscount: this.sellDiscount,
        phone: this.phone,
        remark: this.remark,
        type: this.type,
        id: this.id,
        personnelCount: this.personnelCount,
        acreage: this.acreage
      }

      // this.AddBrand()
      // console.log(obj)
      if (this.showType == '新建') {
        postClient(obj).then((res) => {
          // console.log(res)
          if (res.data.code == 200) {
            this.$emit('postClientSuccess')
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.closeNewClient()
            this.clearData()
          } else {
            this.$message.error({
              message: '添加失败'
            })
            this.clearData()
            this.closeNewClient()
          }
        })
      }
      if (this.showType == '编辑') {
        this.$confirm('是否修改此客户编号的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            if (this.tList != '') {
              // putDiscount(JSON.stringify(this.tList)).then((res) => {
              //   // console.log(res.data)
              //   if (res.data.code == 200) {
              //     this.$message({
              //       message: '修改成功',
              //       type: 'success'
              //     })
              //   }
              // })
            }
            putClient(obj).then((res) => {
              // console.log(res.data)
              if (res.data.code == 200) {
                this.$emit('postClientSuccess')
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.clearData()
                this.closeNewClient()
              } else {
                this.$message.error({
                  message: '修改失败'
                })
                this.clearData()
                this.closeNewClient()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            })
            this.clearData()
            this.closeNewClient()
          })
      }
      this.handleSaveBranded()
      console.log('edit')
    }
  },
  watch: {
    authorizationPhone(a, b) {
      if (a != undefined) {
        this.authorizationPhone = a.toUpperCase().trim().replace(/，/gi, ',') //中文逗号转英文
      }
    },
    headquartersNo(a, b) {
      if (a != undefined) {
        this.headquartersNo = a.toUpperCase().trim()
      }
    },
    no(a, b) {
      if (a != undefined) {
        this.no = a.toUpperCase().trim()
      }
    },
    name(a, b) {
      if (a != undefined) {
        this.name = a.toUpperCase().trim()
      }
    },
    showType(a, b) {
      if (this.showType == '编辑') {
        this.tList = []
        this.Dis = true
      } else if (this.showType == '新建') {
        this.Dis = false
      }

      this.setBrandDataChecked(!this.Dis)
      this.setTableData(this.Dis)
    },
    sendList(a, b) {
      this.clientlist = a

      // 新增
      if (this.clientlist.length) {
        const editData = this.clientlist[0]
        // console.log(editData.acreage, '编辑的数据')
        this.inputDiscount = editData.inputDiscount || 10
        this.sellDiscount = editData.sellDiscount || 10
        this.personnelCount = editData.personnelCount
        this.acreage = editData.acreage
        this.price = editData.price
      }
    },

    details(a, b) {
      // console.log(JSON.parse(JSON.stringify(a)) == {})
      // console.log(JSON.parse(JSON.stringify(a)))
      if (a != '') {
        // console.log(a, 'details')
        this.no = a.no
        this.id = a.id
        this.principal = a.principal
        this.postcode = a.postcode
        // this.inputDiscount = a.inputDiscount
        this.address = a.address
        this.authorizationPhone = a.authorizationPhone
        this.name = a.name
        this.stop = a.stop == 0 ? false : true
        this.orderFormAllocateCargo =
          a.orderFormAllocateCargo == undefined
            ? this.orderFormAllocateCargo
            : a.orderFormAllocateCargo
        this.cellphone = a.cellphone
        this.area = a.area == undefined ? this.area : a.area
        this.headquartersNo = a.headquartersNo
        // this.sellDiscount = a.sellDiscount
        this.nameAll = a.nameAll
        this.phone = a.phone
        this.business = a.business == undefined ? this.business : a.business
        this.price = a.price
        this.cashDeposit = a.cashDeposit
        this.originalNo = a.no
        this.contact = a.contact
        this.fax = a.fax
        this.type = a.type == undefined ? this.type : a.type
        this.outMoneyFloor = a.outMoneyFloor
        this.refundRate = a.refundRate
        this.remark = a.remark

        this.inputDiscount = a.inputDiscount || 10
        this.sellDiscount = a.sellDiscount || 10
        this.personnelCount = a.personnelCount || 6
        this.acreage = a.acreage || 100
      }
    },
    SendData(a, b) {
      //获取编号关联哪些品牌
      this.checkL = []
      this.tList = []
      // console.log(this.SendData)
      this.tList3 = this.SendData
      // console.log(this.sendList)
      // var ti = JSON.stringify(this.checkL).replace(/\[|]/g, '').replace(/\"|"/g, '')
      // getBrandList({brandedSellDiscountList:ti}).then(res=>{
      //   console.log(res.data)
      //     this.tList = res.data.data
      // })
      this.SendData.forEach((e) => {
        this.checkL.push(e.brandedName)
      })
      var querybnd = JSON.stringify(this.checkL)
        .replace(/\[|]/g, '')
        .replace(/\"|"/g, '')

      // 编辑的时候根据no获取对应的数据
      this.toTimeGetBrandedList({ customerNo: this.no })
      this.noToTimeGetBrandedList({ customerNo: this.no })

      //  监听详情的改变 获取对应的数据，并匹配筛选
      // this.getBrandedList()

      // // this.getBrandedList()
      // getBrandedList({
      //   customerNo: this.no
      // }).then((res) => {
      //   this.tList = res.data.data
      // })
    },

    checkL(val, val2) {
      // console.log(val) // if(val != '' || val != []){
      var end = val[val.length - 1]
      // console.log(end) //数组最后一个元素
      if (val != '') {
        ;[this.element].forEach((e) => {
          this.tList.push(
            JSON.parse(
              JSON.stringify({
                brandedName: end,
                customerNo: this.no,
                sellDiscount: e.sellDiscount || 10,
                isOk: 0,
                startTime: '',
                endTime: ''
              })
            )
          )
        })
      }

      let newfood = []
      let temp = {}

      for (let a in this.tList) {
        let key = this.tList[a].brandedName
        if (temp[key]) {
          //数组对象中如果有相同的brandedName 就触发
          // console.log(temp[key])
          this.tList.splice(a, 1) //复选框取消选中此选项是也push了进来 减去当前下标删除一个
          // console.log(val2)
          var firstArray = val.filter((o) => !val2.some((i) => i === o))

          var secondArray = val2.filter((o) => !val.some((i) => i === o))

          // console.log(
          //   firstArray.map((o) => {
          //     return { o: o }
          //   })
          // )
          // console.log(
          //   secondArray
          //     .map((o) => {
          //       return o
          //     })
          //     .join()
          // ) //对比val和val2 中有哪个值是不相同的就删除此条对象
          var nowData = secondArray
            .map((o) => {
              return o
            })
            .join()
          // console.log(temp[key].brandedName)

          for (let r in this.tList) {
            if (this.tList[r].brandedName == nowData) {
              this.tList.splice(r, 1)
            }
          }
        } else {
          temp[key] = {}
          temp[key].brandedName = this.tList[a].brandedName
          temp[key].customerNo = this.tList[a].customerNo
          temp[key].sellDiscount = this.tList[a].sellDiscount
        }
      }
      if (val == '') {
        this.tList = []
      } //清空
    },

    checked(a, b) {
      // console.log(a)
    },
    editionData() {
      // console.log(this.editionData)
      if (this.editionData.versionType < 3) {
        this.typeList = [
          { value: '订货', label: '订货' },
          { value: '配货', label: '配货' },
          { value: '订断', label: '订断' },
          { value: '追断', label: '追断' }
        ]
      } else {
        this.typeList = [
          { value: '订货', label: '订货' },
          { value: '配货', label: '配货' },
          { value: '订断', label: '订断' },
          { value: '追断', label: '追断' },
          { value: '直营', label: '直营' }
        ]
      }
    }
  },
  created() {
    this.editionData = JSON.parse(localStorage.getItem('editionData'))
    // console.log(this.editionData, 'editionData')
    this._getClient()
    this.fundBrand()

    this.provincearr = provincea
    this.$nextTick(() => {
      this.area = this.provincearr[0].name
    })

    //获取业务员
    getClerk().then((res) => {
      // console.log(res)
      if (res.data.data != '') {
        res.data.data.forEach((element) => {
          this.businessarr.push({ label: element.name, value: element.name })
        })
        // this.business = this.businessarr[0].value
        // console.log(this.business)
      }
    })
    // this.getClient()
    //新建獲取品牌
    // fundBrand().then((res) => {
    //   const { data } = res.data
    //   this.checkL = data
    //   this.checkList = data.map((item) => {
    //     return { brandName: item, checked: false }
    //   })
    //   this.tList = data.map((item, index) => {
    //     return {
    //       delID: randomCharacters(),
    //       brandedName: item,
    //       sellDiscount: 10,
    //       isOk: 0,
    //       startTime: '',
    //       endTime: ''
    //     }
    //   })
    //   // console.log(res.data)

    //   // let List = res.data.data
    //   // var List1 = []
    //   // List.forEach((e) => {
    //   //   List1.push({ brandName: e, checked: false })
    //   // })
    //   // this.checkList = List1
    //   // List1.forEach((item) => {
    //   //   this.checkL.push(item.brandName)
    //   // })
    //   // this.tList = List.map((item) => {
    //   //   console.log(item)
    //   //   return {
    //   //     brandedName: item.brandedName,
    //   //     customerNo: ''
    //   //   }
    //   // })
    //   //   if (element.department == '业务') {
    //   //     this.businessarr.push({label:element.name,value:element.name})
    //   //   }
    //   // })
    // })
    // console.log(this.sendList, 'sendList')
  }
}
</script>

<style>
.newClient .right .el-input__inner {
  border-collapse: collapse;
  border: none;
  height: 26px;
}
.nc-info .el-input__icon {
  line-height: 30px;
}
.nc-info .nc-info-2 .el-input,
.nc-info .nc-info-3 .el-input,
.nc-info .nc-info-4 .el-input,
.nc-info .nc-info-5 .el-input {
  width: 160px;
  margin-bottom: 7px;
}
.nc-table .el-input {
  width: 170px;
  margin-right: 5px;
}
.newClient .el-input__inner {
  height: 32px;
}
.newClient p {
  white-space: nowrap;
}
.newClient .right .tab {
  border-bottom: 1px solid #f4f4f4;
  border-right: 1px solid #f4f4f4;
}
.newClient .r-check .el-checkbox {
  width: 100px;
}
</style>

<style scoped lang="less">
.newClient {
  position: fixed;
  top: 10%;
  left: 50%;
  width: 1570px;
  height: 800px;
  transform: translateX(-50%);
  background-color: #fff;
  box-sizing: border-box;
  z-index: 99;
}
.r-check {
  /* border: 1px solid black; */
  width: 520px;
  height: 250px;
  margin-bottom: 15px;
}

.chang-data-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: right;
  .switch-wrap {
    margin-right: 20px;
    span {
      margin-right: 5px;
    }
  }
  /deep/.el-input__inner {
    margin-bottom: 3px;
    margin-top: 3px;
    width: 250px;
    height: 32px;
    line-height: 32px !important;
    border: 1px solid #dcdfe6;

    .el-icon-date {
      margin-bottom: 3px;
    }
    .el-range-input {
      margin-top: 3px;
    }
    .el-range-separator {
      margin-right: 20px;
      margin-bottom: 3px;
    }
  }
}

.left {
  width: 1035px;
  border-right: 2px solid #f4f4f4;
  padding-right: 10px;
}
.right {
  padding-left: 10px;
  overflow: hidden;
  overflow-x: scroll;
}
.nc-top {
  background-color: #f2f2f2;
  height: 50px;
  margin-bottom: 15px;
}
.nc-top p {
  float: left;
  margin: 15px 0 0 20px;
  font-weight: bolder;
  white-space: nowrap;
}
.nc-top i {
  width: 50px;
  float: right;
  text-align: center;
  line-height: 50px;
}
.nc-info-1 {
  display: flex;
}
.nc-info-1 .el-input {
  width: 160px;
}
.nc-info-2 {
  margin-top: 10px;
}
/* .nc-info-5,.nc-info-4{
    display: flex;
  } */
.nc-info-5 > div > p,
.nc-txt {
  display: inline-block;
  width: 85px;
  text-align: end;
  margin: 2px 10px 0 0;
}

.nc-info > div > p {
  display: inline-block;
  margin: 2px 10px 0 0;
  width: 85px;
  text-align: right;
}
.nc-info input {
  color: #60627f;
  height: 30px;
  border: solid 1px #dcdfe6;
  border-radius: 5px;
  width: 98px;
  margin-right: 10px;
  padding-left: 15px;
}
.nc-info input:focus {
  outline: none;
  border: solid 1px #409eff;
}

.nc-info .stop {
  padding-top: 4px;
  margin-left: 40px;
  /* background-color: chartreuse; */
}
.nc-table {
  padding: 0 10px;
}
.nc-table p {
  display: inline-block;
  margin-right: 10px;
  margin-left: 5px;
  white-space: nowrap;
  width: 60px;
}
.nc-info p > span {
  color: red;
}
.nc-table span:first-child {
  margin-right: 20px;
}
.nc-table .clientlist {
  margin-top: 25px;
}
.newClient .operation {
  text-align: end;
  margin-top: 15px;
}
table.tab {
  font-family: verdana, arial, sans-serif;
  border-collapse: collapse;
  width: 300px;
  table-layout: fixed;
  overflow-y: scroll;
}
.col {
  background-color: #f4f4f4;
  height: 35px;
  width: 130px;
}
table.tab th,
table.tab td {
  border-width: 1px;
  border-style: solid;
  border: 1px solid #beb8b8;
  text-align: center;
}
.tabinp {
  width: 135px;
  border: 1px solid #017aff;
  border-radius: 5px;
}
/* .table.tab.tr{
    background-color: #f4f4f4;
  } */
</style>
<style lang="less" scoped>
.right-wrap {
  width: 100%;
  margin: 16px;
  overflow: hidden;
  overflow-x: scroll;
  .checkbox-wrap {
    height: 200px;
    /deep/.el-checkbox {
      margin: 5px;
    }
  }
  .name-wrap {
    height: 100px;
    // background-color: rebeccapurple;
    .search-wrap {
      display: flex;
      align-items: center;
      margin-top: 20px;
      // background-color: red;
      /deep/ ._input {
        margin-right: 20px;
        &.el-input {
          width: 160px;
          .el-input__inner {
            width: 160px;
            height: 32px;
          }
        }
      }
      /deep/.el-input__inner {
        margin-bottom: 3px;
        margin-top: 3px;
        width: 250px;
        height: 32px;
        line-height: 32px !important;
        border: 1px solid #dcdfe6;

        .el-icon-date {
          margin-bottom: 3px;
        }
        .el-range-input {
          margin-top: 3px;
        }
        .el-range-separator {
          margin-right: 20px;
          margin-bottom: 3px;
        }
      }
    }
    .mr8 {
      margin-right: 8px;
    }
  }
  .table-wrap {
    /deep/.cell {
      // width: 91px;
      .table-input {
        width: 79px;
        border: 1px solid #ebeef5;
        // background-color: rebeccapurple;
      }
      .el-date-editor--date {
        width: 140px;
        border: 1px solid #ebeef5;
        .el-input__prefix,
        .el-input__suffix {
          top: -3px;
        }
      }
    }
    /deep/.el-table__body-wrapper {
      height: 300px !important;
    }
  }
}
::v-deep .showRow {
  display: none;
}
</style>
